<template>
  <div class="my-container">
    <van-cell-group v-if="user">
      <van-cell center :border="false">
        <van-image
          class="avatar"
          slot="icon"
          round
          fit="cover"
          :src="userData.photo"
          @click="$router.push({
            name: 'homepage',
            params: {
              user_id: userData.id
            }
          })"
        />
        <div slot="title" class="nikaname">
          {{ userData.name }}
        </div>
        <van-button
          class="myinfo"
          size="small"
          round
          to="/user/profile"
        >编辑资料</van-button>
      </van-cell>
      <van-grid :border="false">
        <van-grid-item>
          <div slot="text" class="grid-item">
            <div class="num">{{ userData.art_count }}</div>
            <div class="text">头条</div>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div slot="text" class="grid-item">
            <div class="num">{{ userData.follow_count }}</div>
            <div class="text">关注</div>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div slot="text" class="grid-item">
            <div class="num">{{ userData.fans_count }}</div>
            <div class="text">粉丝</div>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div slot="text" class="grid-item">
            <div class="num">{{ userData.like_count }}</div>
            <div class="text">获赞</div>
          </div>
        </van-grid-item>
      </van-grid>
    </van-cell-group>
    <div class="no-login" v-else @click="$router.push({
      name: 'login',
      query: {
        redirect: '/my'
      }
    })">
      <img class="avatar" src="./phone.png">
      <div class="text">登录 / 注册</div>
    </div>
    <van-grid clickable :column-num="2">
      <van-grid-item icon-prefix="icon" icon="shoucang" text="收藏" to="/" />
      <van-grid-item icon-prefix="icon" icon="lishi" text="历史" to="/" />
    </van-grid>
    <van-cell title="消息通知" is-link to="/" />
    <van-cell title="小智同学" is-link to="/" />
    <van-cell
      v-if="user"
      class="btn_login"
      title="退出登录"
      @click="onLogout"
    />
  </div>
</template>
<script>

// 导入vuex容器映射组件
import { mapState } from 'vuex'

// 导入my数据请求接口
import { getUserInfo } from '@/api/my'

export default {
  name: 'myIndex',
  data () {
    return {
      userData: []
    }
  },
  computed: {
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState(['user'])
  },
  methods: {
    // 获取用户个人信息
    async UserInfo () {
      const res = await getUserInfo()
      this.userData = res.data.data
    },
    // 退出登录
    onLogout () {
      this.$dialog.confirm({
        title: '退出提示',
        message: '请问您确定要退出吗?'
      })
      // 退出
        .then(() => {
          // 将vuex共享容器中数据掷为null, 响应视图更新退出
          this.$store.commit('setUser', null)
        })
        // 不退出
        .catch(() => {
        // on cancel
        })
    }
  },
  created () {
    this.UserInfo()
  }
}
</script>
<style lang="less">
.my-container{
  .van-cell-group{
    background: url('./banner.png') no-repeat;
    background-size: cover;
    .van-cell--center{
      background-color: unset;
      height: 115px;
      .avatar{
        width: 66px;
        height: 66px;
        border: 1px solid #ffffff;
      }
      .nikaname{
        color: #ffffff;
        font-size: 15px;
        margin-left: 10px;
      }
      .myinfo{
        height: 16px;
        font-size: 10px;
        color: #666666;
      }
    }
    .van-grid{
      height: 65px;
      .van-grid-item{
        .van-grid-item__content--center{
          background-color: unset;
          width: 100%;
          height: 100%;
          padding: 0;
          .grid-item{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .num{
              font-size: 18px;
              color: #ffffff;
            }
            .text{
              font-size: 11px;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
  .no-login{
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url('./banner.png') no-repeat;
    background-size: cover;
    .avatar{
      width: 66px;
      height: 66px;
      margin-bottom: 7px;
    }
    .text{
      font-size: 14px;
      color: #ffffff;
    }
  }
  .van-hairline--top{
    height: 70px;
    border-bottom: 4px solid #f5f7f9;
    .van-grid-item__content--clickable{
      padding: 0;
      .icon{
        font-size: 22px;
      }
      .van-grid-item__text{
        font-size: 14px;
      }
      .icon-shoucang{
        color: #eb5253;
      }
      .icon-lishi{
        color: #ff9d1d;
      }
    }
  }
  .van-cell--clickable{
    span{
      font-size: 15px;
    }
  }
  .btn_login{
    border-top: 4px solid #f5f7f9;
    text-align: center;
    span{
      color: #d86262;
      font-size: 15px;
    }
  }
}
</style>
